create-react-app中按需加载antd

使用create-react-app脚手架创建出来的react项目，他的配置项是隐藏的，如果想要修改原始的配置项，需要npm run eject,但是这个操作是不可逆的，一般情况下我们不会去直接修改他的原始配置项。

那么如果我想在用create-react-app脚手架创建的项目中使用antd design 官方推荐的按需加载要怎么添加自己的配置项呢？此时我们可以用 react-app-rewired 来实现。

第一步：安装antd按需加载的插件babel-plugin-import

npm install babel-plugin-import --save-dev

第二步：安装react-app-rewired

$ npm install react-app-rewired --save-dev

react-app-rewired是一个再配置的工具。安装完之后在根目录新建一个config-overrides.js的文件，在这个配置文件中新增加自己的自定义配置，可以实现在不eject的情况下自定义配置。

第三步：安装customize-cra

npm install customize-cra --save-dev

使用customize-cra要确保先安装了react-app-rewired。
接下来就可以来配置按需加载了。
首先在项目的根目录下新建一个config-overrides.js文件，接下来在这个文件中写我们自己的配置

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {        
        libraryName: 'antd',        
        libraryDirectory: 'es',       
        style: 'css'
    })
)

之后在组件中测试

import React, { Component } from 'react';
import { Button } from 'antd';
class Test extends Component {
    render() {
        return (
            <div>
                <Button type="primary">点击</Button>
            </div>
        )
    }
}
export default Test;

这样就可以实现按需加载antd的组件，并且无需手动引入样式了。